<template>
	<view style="background-color: #f0f0f0; height:570px">
		<view class="box-top">
			<image class="image1" :src="Info.userInfo.avatarUrl"></image>
			<text class="text2">{{Info.userInfo.nickName}}</text>
		</view>

		<view class="panel-list">
			<view class="outSide">
				<view class="rou">
					<view>8</view>
					<view>店铺</view>
				</view>
				<view class="rou">
					<view>8</view>
					<view>收藏的商品</view>
				</view>
				<view class="rou">
					<view>8</view>
					<view>关注的商品</view>
				</view>
				<view class="rou">
					<view>8</view>
					<view>足迹</view>
				</view>
			</view>

		</view>

		<view class="main-box">
			<view class="main-size">
				<view class="top">我的订单</view>
				<view class="outSide">
					<view class="rou">
						<image class="image" src="../../static/my-icons/icon1.png"></image>
						<view>待付款</view>
					</view>
					<view class="rou">
						<image class="image" src="../../static/my-icons/icon2.png"></image>
						<view>待收货</view>
					</view>
					<view class="rou">
						<image class="image" src="../../static/my-icons/icon3.png"></image>
						<view>退货/退款</view>
					</view>
					<view class="rou">
						<image class="image" src="../../static/my-icons/icon4.png"></image>
						<view>全部订单</view>
					</view>
				</view>
			</view>
		</view>

		<view class="bottom-box">
			<view class="box-outSide">
				<view class="rou1">
					<text>收货地址</text>
					<uni-icons type="forward"></uni-icons>
				</view>
				<view class="rou1">
					<text>联系客服</text>
					<uni-icons type="forward"></uni-icons>
				</view>
				<view class="rou1" @click="OutLogin">
					<text>退出登录</text>
					<uni-icons type="forward"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		computed: {
			Info() {
				return uni.$Store.state.cartdata.userInfo
			}
		},
		methods:{
			
			OutLogin(){
				uni.showModal({
					content:"你确定要退出登录吗?",
					success:(res)=>{
						if(!res.confirm) return uni.$showMsg("你以取消")
					 uni.$Store.commit("removeMU")
						uni.removeStorageSync("userInfo")
						uni.removeStorageSync("address")
					}
					
				})
			}
		}
	}
</script>

<style lang="scss">
	.box-top {
		width: 100%;
		height: 200px;
		background-color: #c00000;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.image1 {
			width: 80px;
			height: 80px;
	  border-radius: 50%;
			border: 2px solid #fff;
		}

		.text2 {
			margin-top: 10px;
			font-size: 14px;
			color: white;
		}
	}

	.panel-list {
		padding: 0 10px;
		margin-top: -15px;


		.outSide {
			background-color: white;
			display: flex;
			justify-content: space-between;
			padding: 10px 10px;

			.rou {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 13px;
			}
		}
	}

	.main-box {
		margin-top: 20px;
		padding: 0 10px;

		.main-size {
			background-color: white;
		}

		.top {
			height: 40px;
			padding: 0 10px;
			line-height: 40px;
			border-bottom: 1px solid #f4f4f4;
		}

		.outSide {

			display: flex;
			justify-content: space-between;
			padding: 0px 10px;

			.rou {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 13px;
				height: 70px;

				.image {
					width: 35px;
					height: 35px;

				}
			}
		}
	}

	.bottom-box {
		padding: 0 10px;
        margin-top:20px;
		.box-outSide {
			background-color: white;
			.rou1
			{
				padding:0 10px;
				height:40px;
				display:flex;
				justify-content: space-between;
				align-items: center;
				 
			}
		}
	}
</style>
